<template>
  <div>
    <Card class="outCard">
      <div class="modalContent">
        <div class="image">
          <!-- <img :src="headPortrait" /> -->
        </div>
        <div class="baseContent">
          <div class="name">
            {{row.name}}
            <span style="color:rgba(24, 141, 255, 1);margin-left:20px">{{currentMonth}}</span>
          </div>
          <div class="otherContent">
            所属机构：{{row.organizationNo}}-{{row.organization}}
            <span
              style="margin-left:5px;margin-right:5px;"
            >|</span>
            角色：{{row.role}}
          </div>
        </div>
      </div>
      <span style="display:block;clear:both"></span>
      <Table :columns="outColumns" :data="outData" :span-method="handleSpan" border>
        <template slot="photoUrl" slot-scope="{row}">
          <span v-for="(item,index) in row.photoUrl" :key="index" class="showSmallPhoto">
            <span v-if="item">
              <span v-if="item[1] === '0'">
                <!-- <video :src="item[0]" @click="showPhoto(item)"></video> -->
              </span>
              <span v-if="item[1] === '1'">
                <!-- <img :src="item[0]" @click="showPhoto(item)" /> -->
              </span>
            </span>
          </span>
        </template>
      </Table>
      <Modal
        footer-hide="true"
        :value="photoModal"
        :mask-closable="true"
        @on-visible-change="modalVisibleChange2"
        :closable="false"
      >
        <span v-if="photoItem[1] === '0'">
          <span class="photoModal">
            <!-- <video :src="photoItem[0]" controls id="video1"/> -->
          </span>
        </span>
        <span v-if="photoItem[1] === '1'">
          <span class="photoModal">
            <!-- <img :src="photoItem[0]" /> -->
          </span>
        </span>
      </Modal>
    </Card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      row: this.$route.query.row,
      outColumns: [
        {
          title: "日期",
          key: "signDay",
          width: ""
        },
        {
          title: "打卡时间",
          key: "signTime",
          align: "center",
          width: "120"
        },
        {
          title: "地点",
          key: "signSite",
          width: "300"
        },
        {
          title: "设备",
          key: "equipment",
          width: "300"
        },
        {
          title: "打卡照片",
          key: "photoUrl",
          slot: "photoUrl"
        }
      ],
      outData: [],
      currentMonth: "",
      photoModal: false,
      photoItem: "",
      headPortrait: ""
    };
  },
  methods: {
    // 点击照片缩略图触发事件
    showPhoto(photoUrl) {
      this.photoModal = true;
      this.photoItem = photoUrl;
      // this.$refs.showBigPhoto.src = photoUrl;
    },

    // 照片窗口
    modalVisibleChange2(value) {
      if (!value) {
        this.photoModal = false;
        let video1 = document.getElementById("video1")
        video1.pause()
      }
    },

    // 展示详情
    attendDetail() {
      this.currentMonth = this.row.monthly.substr(5, 3);
      let obj = {
        monthly:
          this.row.monthly.substr(0, 4) + "-" + this.row.monthly.substr(5, 2),
        no: this.row.no
      };
      this.api.getByOnesM(obj).then(res => {
        if (res.code == 200) {
          if (res.data == null) {
            this.outData = [];
            this.$Message.info("查询结果为空");
            return;
          }
          this.outData = res.data;
          this.outData.forEach(element => {
            if (element.signDay) {
              element.signDay =
                element.signDay.substr(2, 8) +
                "星期" +
                "天一二三四五六 ".charAt(new Date(element.signDay).getDay());
            }
            if (element.signTime) {
              element.signTime = element.signTime.substr(0, 5);
            }
          });
        } else {
          this.outData = [];
          this.$Message.info(res.msg);
        }
      });
      this.headPortrait = ""
      this.api.getUserChatHeadByNo(obj).then(res => {
        if (res.code == 200 && res.data != null) {
          this.headPortrait = res.data;
        }
      });
    },
    // 待测试
    backBtn() {
      this.$router.go(-1);
    }
  },
  mounted() {
    this.attendDetail();
  },
  beforeDestroy() {
    this.row = null
    this.outColumns = null
    this.outData = null
    this.currentMonth = null
    this.photoModal = null
    this.photoItem = null
    this.headPortrait = null
  }
};
</script>

<style lang="less" scoped>
@import "./dayCount.less";
</style>